import React, { useState, useEffect } from 'react';
import Toast from "antd-mobile/es/toast";
import Button from "antd-mobile/es/button";
// import { getFileType, FILE_TYPE, previewImg } from '@alife/goc-utils';
import Upload from 'rc-upload';
import { getFileUrl } from "services/public.js";
import CustomList from './CustomList';

/*
 {
  "label": "附件1",
  "required": true,
  "params": {
    "params": {
      "multiple": true
    }
  },
  "itemProps": {
    "template": [
      {
        "fileName": "upload.txt",
        "url": "/flow-platform/file/download?objectName=test/20210520/a51d2179-e1e8-405d-9444-ff5442d5355a_upload.txt"
      },
      {
        "fileName": "upload1.txt",
        "url": "/flow-platform/file/download?objectName=test/20210520/ff632543-8e9d-43d0-b438-908bb2b21a94_upload1.txt"
      }
    ]
  },
}
 */
const PhoneUpload = (props) => {
  const {
    itemProps: { template = [] } = {},
    params: { params: { multiple } = {} } = {},
    value: propsValue,
    onChange,
  } = props;
  const [uploading, setUploading] = useState(false);
  const [value, setValue] = useState(propsValue);

  useEffect(() => {
    setValue(propsValue);
  }, [propsValue]);

  const uploadProps = {
    accept: "*",
    action: "/flow-platform/file/add",
    onChange: () => {},
    defaultFileList: [],
    // onStart: () => setUploading(true),
    beforeUpload: () => {
      if (uploading) {
        Toast.fail('上传中，请稍侯');
        return Promise.reject();
      }
      if (value && value.length > 0 && !multiple) {
        Toast.fail('只能上传单个文件');
        return Promise.reject();
      }
      setUploading(true);
    },
    onSuccess: (result, file) => {
      if (result.datas) {
        Toast.success('上传成功');
        if (multiple) {
          onChange([
            ...(value || []),
            {
              name: file.name,
              url: getFileUrl(result.datas),
            },
          ]);
        } else {
          onChange([{
            name: file.name,
            url: getFileUrl(result.datas),
          }]);
        }
      } else {
        Toast.fail('上传失败');
      }
      setUploading(false);
    },
    onError: () => {
      Toast.fail('上传失败');
      setUploading(false);
    },
    multiple,
  };

  const handleDownload = (url) => {
    if (url) {
      window.open(url);
    }
  };

  /*
  const handleItemClick = (item) => {
    const { name, url } = item.type,
        url = item.url;

    if (name && name.test()) {
      previewImg(url, _Toast.fail);
    } else {
      handleDownload(url);
    }
  };
  */

  return (
    <div style={{width: '100%'}}>
      <Upload
        {...uploadProps}
      >
        <Button loading={uploading} size="small">点击上传</Button>
      </Upload>
      { value && value.length > 0 && <div style={{fontSize: 13, margin: '8px 0' }}>已上传:</div> }
      <div>
        <CustomList
          value={value || []}
          mode="remove"
          onClick={(item) => {
            const newValue = (value || []).filter(v => v !== item);
            onChange(newValue);
          }}
        />
      </div>
      { template && template.length > 0 && <div style={{fontSize: 13, margin: '8px 0'}}>附件模板:</div> }
      <div>
        <CustomList
          value={(template || []).map(({ fileName, url }) => ({ name: fileName, url }))}
          mode="download"
          onClick={(item) => handleDownload(item.url)}
        />
      </div>
    </div>
  );
}

export default PhoneUpload;
